<template>
	<Box :title='config.title' :titleConfig='cotrolsConfig'>
		<Table ref='tableRef' :config='tableConfig' />
	</Box>
</template>

<script setup>
	/* ---------------------------  Component --------------------------- */
	const Box 	= $.lazy(()=>import('#tp/box/box.vue'))
	const Table	= $.lazy(()=>import('@antd/table.vue'))
	
	/* --------------------------- props --------------------------- */
	const { config, value } = defineProps({
		config 			: { type:Object, default:{  } },
	})
	/* ---------------------------  数据格式 --------------------------- */
	const { data, cols, api, structure = {} } = config
	/* ---------------------------  添加数据 --------------------------- */
	const cotrolsConfig = {
		controls: [
			{ label:'添加', mode:'add', ghost:true, click: () => {
				if( $fn.hasArray( tableConfig.data )){
					tableConfig.data.push(structure)
				}else{
					tableConfig.data = [ structure ]
				}
			} }
		]
	}
	/* ---------------------------  编辑表格配置 --------------------------- */
	let tableRef = $ref()
	let tableConfig = $ref({
		height: 'auto',			// 表格自动高
		edit: 1,				// 是否可编辑
		api,
		cols		: [
			...$fn.getResult(cols),
		],
		onInit:({ f, ref }) => {	// 初始化运行
			
		},
		data: $fn.copy( data ),
		controls: {
			width: 80,
			data: (row, index) => [
				{ label:'删除', icon:'del', click:() => tableConfig.data.splice(index, 1) }
			]
		}
	})
	
	defineExpose({
		data(){
			return arguments.length === 0 ? tableConfig.data : tableConfig.data = arguments[0]
		}
	})
</script>